<script setup>
import { reactive, ref } from "vue"
import { User, Lock } from "@element-plus/icons-vue"
import { useRouter } from "vue-router"
import { ElMessage } from "element-plus";
import { login } from "@/request"
const form = reactive({
    username: "",
    password: "",
    remember: false
});

const router = useRouter();

const goRegister = () => {
    router.push("/register")
}

const rule = {
    username : [
        {
            required: true, message: "用户名不能为空"
        }
    ],
    password : [
        {
            required: true, message: "密码不能为空"
        }
    ]
}

const formRef = ref()

const loginJob = () => {
    formRef.value.validate(
        (valid) => {
            if(valid){
                login({...form}, (data)=>{
                        router.push("/index")
                })
            }
        }
    )
}
</script>

<template>
  <div class="left-box">
    <div class="login-form">
        <div>
            <h1>登录</h1>
            <div>
                <el-form :model="form" :rules="rule" ref="formRef">
                    <el-form-item prop="username">
                        <el-input v-model="form.username" type="text" 
                            maxlength="20" placeholder="请输入用户名">
                            <template #prefix>
                                <el-icon><User/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="form.password" maxlength="16"
                        placeholder="请输入密码" type="password"
                        >
                            <template #prefix>
                                <el-icon><Lock/></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item>
                                <el-checkbox v-model="form.remember" label="记住我"></el-checkbox>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" class="text-right">
                            <el-link href="#">找回密码</el-link>
                        </el-col>
                    </el-row>
                </el-form>
                
            </div>
            <el-row>
                <el-col :span="12">
                    <el-button @click="loginJob" type="success" class="mxt-btn">登录</el-button>
                </el-col>
                <el-col :span="12" class="text-right">
                    <el-button @click="goRegister()" type="default" class="mxt-btn">注册</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="split-box">
            <div class="split-item">
                <el-divider>其他方式登录</el-divider>
            </div>
        </div>
    </div>
  </div>
  <div class="right-box">
    <el-image style="border-radius: 0 6px 6px 0;" src="https://cdn.maxuetang.cn/ojimages/uploadFiles/image/20250505/20250505233533_751_htimg.png"/>
  </div>
</template>

<style scoped>
.left-box, .right-box{
    width: 50%;
    height: 100%;
    color: #969696;
}

.right-box{
    position: absolute;
    top:0;
    left: 50%;
}
.login-form{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: #fff;
    flex-direction: column;
    border-radius: 6px 0 0 6px;
}
.login-form>div{
    width: 90%;
}
.text-right{
    text-align: right;
}
.mxt-btn{
    min-width: 90%;
}
.split-box{
    width: 90%;
    margin-top: 30px;
}
.split-item{
    width: 100%;
}
</style>
